<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>场地利用率表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        /* Center modal title */
        .modal-header {
            justify-content: center;
        }

        /* Increase font size of modal title*/
        .modal-title {
            font-size: 1.5rem;
        }

        /* Add margin to form groups */
        .form-group {
            margin-bottom: 1rem;
        }

        /* Add border to invalid inputs */
        .form-control.is-invalid {
            border-color: #dc3545 !important;
        }

        /* Change color of invalid feedback text */
        .invalid-feedback {
            color: #dc3545;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">场地利用率表</h1>
    <button id="get-time-money" class="btn btn-primary">选择时间</button>
    <table id="time-money-table" class="table table-bordered mt-3">
        <thead>
        <tr>
            <th>场地类型</th>
            <th>场地利用率</th>
        </tr>
        </thead>
        <tbody id="result"></tbody>
    </table>
</div>

<!-- Modal -->
<div class="modal fade" id="select-time-modal" tabindex="-1" role="dialog" aria-labelledby="select-time-modal-label"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="select-time-modal-label">选择时间</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="select-time-form">
                    <div class="form-group">
                        <label for="start-time">Start Time:</label>
                        <input type="text" name="start-time" id="start-time" class="flatpickr form-control"
                               placeholder="Select start time" required>
                        <div class="invalid-feedback">此选项为必填项</div>
                    </div>

                    <div class="form-group">
                        <label for="end-time">End Time:</label>
                        <input type="text" name="end-time" id="end-time" class="flatpickr form-control"
                               placeholder="Select end time" required>
                        <div class="invalid-feedback">此选项为必填项</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submit-time-range">Confirm</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    $(function () {
        // 初始化时间选择器
        $(".flatpickr").flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i:S",
            time_24hr: true,
            onClose: function (selectedDates, dateStr, instance) {
                // 校验是否填写了起始时间和结束时间
                if (instance.input.name === "start-time" && !dateStr) {
                    instance.element.classList.add("is-invalid");
                } else if (instance.input.name === "end-time" && !dateStr) {
                    instance.element.classList.add("is-invalid");
                } else {
                    instance.element.classList.remove("is-invalid");
                }
            }
            // 当选择器关闭时，进行校验，如果没有选择就显示提示信息
        });

        $('#get-time-money').click(function () {
            // 清空表单中的输入内容
            $('#select-time-form')[0].reset();
            // 移除表单中所有元素的 is-invalid 类名
            $('#select-time-form :input').removeClass('is-invalid');
            // 显示弹窗
            $('#select-time-modal').modal('show');
        });

        $('#submit-time-range').click(function () {
            var startTime = $('#start-time').val();
            var endTime = $('#end-time').val();

            // 校验是否填写了起始时间和结束时间
            if (!startTime || !endTime) {
                $('#start-time, #end-time').addClass("is-invalid");
                return;
            }

            // 隐藏弹窗
            $('#select-time-modal').modal('hide');

            // 发送请求
            $.ajax({
                url: '/stadium/admin/getUtilizationRate',
                type: 'POST',
                dataType: 'json',
                data: {
                    startTime: startTime,
                    endTime: endTime
                },
                success: function (data) {
                    var tbody = $('#time-money-table tbody');
                    tbody.empty();
                    $.each(data, function (key, value) {
                        var row = $('<tr>');
                        row.append($('<td>').text(key));
                        row.append($('<td>').text(value));
                        tbody.append(row);
                    });
                    console.log(data)
                    // 获取要添加按钮的div元素
                    const div = document.getElementById('result');

                    // 创建一个新的按钮元素
                    const button = document.createElement('button');

                    // 设置按钮文本内容
                    button.innerHTML = '下载附件';

                    // 将按钮的id属性设置为newButton
                    button.id = 'newButton';

                    // 将按钮添加到div元素中
                    div.appendChild(button);

                    button.addEventListener('click', function() {
                        downLoadStadiumUtilizationRate(data);

                    });
                },
                error: function () {
                    alert('获取数据失败！');
                }
            });
        });

        function downLoadStadiumUtilizationRate(data) {
            // 将数据转换为 JSON 字符串
            const jsonString = JSON.stringify(data);

            // 发送 AJAX 请求
            $.ajax({
                url: 'http://localhost:8080/stadium/common/downLoadStadiumUtilizationRate',
                method: 'POST',
                data: jsonString,
                contentType: 'application/json',
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(blob) {
                    // 创建 URL 并下载文件
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'stadiumUtilizationRate.csv';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                },
                error: function(xhr, status, error) {
                    console.error('There was a problem with the fetch operation:', error);
                }
            });
        }

    });
</script>
</body>
</html>

